<script setup lang="ts">
import Layout from '@/layout/master/Layout.vue'
// import Pie from '@/component/content/charts/Pie.vue'
import * as echarts from 'echarts'
import { formatNumber } from '@/utils/content/number'
import { abilityNumData, abilityRankList, pieData, pieData2, apiUseRankList, newIndexData1, awardList } from './index'

const chart1 = ref(null)
const chart2 = ref(null)
const chart3 = ref(null)
const chart4 = ref(null)
const chart5 = ref(null)
const chart6 = ref(null)
const chart7 = ref(null)

const myChart1 = ref(null)
const myChart2 = ref(null)
const myChart3 = ref(null)
const myChart4 = ref(null)
const myChart5 = ref(null)
const myChart6 = ref(null)
const myChart7 = ref(null)

const handleImgDirection = (num) => {
  return num.toString().startsWith('-') ? new URL('../../assets/image/home/down.png', import.meta.url).href : new URL('../../assets/image/home/up.png', import.meta.url).href
}

const drawChats = () => {
  nextTick(() => {
    // echarts.init(chart1.value)
    let option1 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['上台能力数量', '调用量']
      },
      xAxis: [
        {
          type: 'category',
          data: ['3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月'],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            textStyle: {
              color: '#000'
            },

          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '个',
          min: 0,
          max: 1200,
          interval: 200,
          axisTick: {
            show: true
          },
          axisLine: {
            show: true
          }
        },
        {
          type: 'value',
          name: '亿次',
          min: 0,
          max: 700,
          interval: 100,
          axisTick: {
            show: true
          },
          axisLine: {
            show: true
          }
        }
      ],
      series: [
        {
          name: '上台能力数量',
          type: 'bar',
          tooltip: {
            valueFormatter: function(value) {
              return value + ' 个'
            }
          },
          itemStyle: {
            color: '#8196FF',
            barBorderRadius: [50, 50, 0, 0]
          },
          data: [
            796, 651, 802, 923, 790, 812, 930, 694, 682, 758, 809, 992
          ]
        },
        {
          name: '调用量',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function(value) {
              return value + ' 亿次'
            }
          },
          data: [403, 394, 427, 420, 412, 402, 392, 404, 457, 498, 540, 523]
        }
      ]
    }

    let option2 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['广东公司', '浙江公司', '福建公司', '湖北公司', '河南公司', '河北公司', '湖南公司', '重庆公司', '四川公司', '江西公司', '贵州公司', '北京公司', '山东公司', '辽宁公司', '黑龙江公司', '吉林公司', '天津公司', '云南公司', '山西公司', '上海公司', '安徽公司', '陕西公司', '宁夏公司', '新疆公司', '广西公司', '甘肃公司', '青海公司', '海南公司', '内蒙古公司', '西藏公司'],
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            rotate: 270,
            textStyle: {
              color: '#000'
            },
            formatter: function(value) {
              var maxLength = 5; // 最大显示长度
              if (value.length > maxLength) {
                return value.substring(0, maxLength) + ''; // 超出最大长度则加上省略号
              } else {
                return value;
              }
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '上台情况',
          type: 'bar',
          itemStyle: {
            color: '#8196FF',
            barBorderRadius: [50, 50, 0, 0]
          },
          label: {  // 设置数值显示的样式
            show: false,  // 显示数值
            position: 'top'  // 在顶部显示数值
          },
          data: [228, 199, 178, 98, 96, 90, 86, 76, 68, 56, 52, 46, 38, 35, 28, 19, 16, 12, 10, 8, 7, 6, 6, 6, 6, 5, 5, 5, 5, 4, 3, 3, 2]
        }
      ]
    }
    let option3 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['集团', '智慧家族运营中心', '研究院', '在线服务公司', '集团网络事业部', '物联网公司', '设计院', '云能力中心', '互联网公司', '咪咕公司', '成都产业研究院', '金科公司', '集团政企事业部', '上海产业研究院', '信安中心', '集成公司', '供应链管理中心', '卓望公司', '铁通集团', '集团信网项目部', '集团内审部', '国际公司', '终端公司', '集团法律与监管事务部', '集团财务部'],
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            rotate: 270,
            textStyle: {
              color: '#000'
            },
            formatter: function(value) {
              var maxLength = 5; // 最大显示长度
              if (value.length > maxLength) {
                return value.substring(0, maxLength) + ''; // 超出最大长度则加上省略号
              } else {
                return value;
              }
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '上台情况',
          type: 'bar',
          itemStyle: {
            color: '#8196FF',
            barBorderRadius: [50, 50, 0, 0]
          },
          label: {  // 设置数值显示的样式
            show: false,  // 显示数值
            position: 'top'  // 在顶部显示数值
          },
          data: [358, 266, 242, 155, 120, 88, 64, 56, 56, 27, 18, 16, 16, 15, 12, 9, 8, 8, 6, 5, 4, 3, 3, 1, 1]
        }
      ]
    }

    let option4 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['江苏公司', '广东公司', '浙江公司', '湖北公司', '河南公司', '湖南公司', '福建公司', '河北公司', '重庆公司', '四川公司', '江西公司', '贵州公司', '北京公司', '山东公司', '辽宁公司', '上海公司', '吉林公司', '天津公司', '云南公司', '山西公司', '黑龙江公司', '安徽公司', '陕西公司', '宁夏公司', '新疆公司', '广西公司', '甘肃公司', '青海公司', '海南公司', '内蒙古公司', '西藏公司'],
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            rotate: 270,
            textStyle: {
              color: '#000'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          itemStyle: {
            color: '#8196FF',
            barBorderRadius: [50, 50, 0, 0]
          },
          // label: {  // 设置数值显示的样式
          //   show: true,  // 显示数值
          //   position: 'top'  // 在顶部显示数值
          // },
          data: [552, 534, 511, 499, 475, 463, 448, 430, 426, 404, 396, 388, 360, 341, 332, 322, 310, 300, 295, 286, 274, 265, 259, 242, 233, 222, 219, 205, 197, 184, 173]
        }
      ]
    }
    let option5 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['在线营销服务中心', '智慧家族运营中心', '上海产业研究院', '在线服务公司', '集团网络事业部', '物联网公司', '设计院', '云能力中心', '互联网公司', '咪咕公司', '成都产业研究院', '金科公司', '集团政企事业部', '研究院', '集团', '集成公司', '供应链管理中心', '卓望公司', '铁通集团', '集团信网项目部', '集团内审部', '国际公司', '终端公司', '集团法律与监管事务部', '集团财务部'],
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            rotate: 270,
            textStyle: {
              color: '#000'
            },
            formatter: function(value) {
              var maxLength = 5; // 最大显示长度
              if (value.length > maxLength) {
                return value.substring(0, maxLength) + ''; // 超出最大长度则加上省略号
              } else {
                return value;
              }
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '能力使用情况',
          type: 'bar',
          itemStyle: {
            color: '#8196FF',
            barBorderRadius: [50, 50, 0, 0]
          },
          label: {
            show: false,
            position: 'top'
          },
          data: [358, 266, 242, 155, 120, 88, 64, 56, 56, 27, 18, 16, 16, 15, 12, 9, 8, 8, 6, 5, 4, 3, 3, 1, 1]
        }
      ]
    }

    let option6 = {
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          return `${params.name}: ${params.value}%`
        }
      },
      grid: {
        left: '0',  // 将网格左边距设置为0，使图形绘制在最左侧
        right: '10%',  // 可以根据需要调整右边距
        top: '10%',
        bottom: '10%',
        containLabel: true
      },
      legend: {
        orient: 'vertical',  // 将图例垂直显示
        right: 10,  // 位置调整，可以根据需求自行调整
        top: 'center',
        formatter: function(name) {
          const data = pieData.find(item => item.name === name)
          return name + '：' + data.value + '%'
        }
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['20%', '50%'],
          avoidLabelOverlap: true,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          center: ['20%', '50%'],
          data: pieData
        }
      ]
    }

    let option7 = {
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          return `${params.name}: ${params.value}%`
        }
      },
      grid: {
        left: '3%',   // 左边距
        right: '4%',  // 右边距
        top: '3%',    // 上边距
        bottom: '3%' // 下边距
      },
      legend: {
        orient: 'vertical',  // 将图例垂直显示
        right: 10,  // 位置调整，可以根据需求自行调整
        top: 'center',
        formatter: function(name) {
          const data = pieData2.find(item => item.name === name)
          return name + '：' + data.value + '%'
        }
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['20%', '50%'],
          avoidLabelOverlap: true,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          center: ['20%', '50%'],
          data: pieData2
        }
      ]
    }

    myChart1.value.setOption(option1)
    myChart2.value.setOption(option2)
    myChart3.value.setOption(option3)
    myChart4.value.setOption(option4)
    myChart5.value.setOption(option5)
    myChart6.value.setOption(option6)
    myChart7.value.setOption(option7)
  })
}

onMounted(() => {
  nextTick(() => {
    myChart1.value = echarts.init(chart1.value)
    myChart2.value = echarts.init(chart2.value)
    myChart3.value = echarts.init(chart3.value)
    myChart4.value = echarts.init(chart4.value)
    myChart5.value = echarts.init(chart5.value)
    myChart6.value = echarts.init(chart6.value)
    myChart7.value = echarts.init(chart7.value)
  })
  !function(doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function() {
        drawChats()
        nextTick(() => {
          myChart1.value.resize()
          myChart2.value.resize()
          myChart3.value.resize()
          myChart4.value.resize()
          myChart5.value.resize()
          myChart6.value.resize()
          myChart7.value.resize()
        })

        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px' // 这里750是设计稿基准宽度，按需调整
      }

    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
  }(document, window)


  drawChats()

})

</script>

<template>
  <Layout>
    <!--    <v-scale-screen width="1920">-->
    <div class="content">
      <!--      <div class="title-area">-->
      <!--        <img src="../../assets/image/home/title.png" alt="">-->
      <!--      </div>-->

      <div class="main-content">
        <!--        <div class="data-overview-wrap">-->
        <!--          <div class="data-overview-cube" v-for="(item,index) in newIndexData1" :key="index"-->
        <!--               :class="{'padding-r0':index === 3}">-->
        <!--            <div class="data-overview-icon">-->
        <!--              <img :src="item.icon" alt="">-->
        <!--            </div>-->
        <!--            <div class="data-overview-detail">-->
        <!--              <div>-->
        <!--                <span>{{ item.num }}</span>-->
        <!--                <span>{{ item.unit }}</span>-->
        <!--              </div>-->
        <!--              <div>{{ item.name }}</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->

        <div class="data-key-card-wrap">
          <el-row :gutter='12'>
            <el-col :span='6' v-for="(item,index) in abilityNumData" :key="index">
              <div class="ability-num-cards">
                <div class="ability-name-diagram">
                  <div class="ability-name-num">
                    <div class="ability-type">{{ item.name }}</div>
                    <div class="ability-num">{{ formatNumber(item.value) }}</div>
                  </div>
                  <div class="ability-diagram">
                    <img :src="item.diagram" alt="">
                  </div>
                </div>
                <div class="ability-num-directions">
                  <div class="ability-num-direction-row">
                    <div>
                      <span>月同比</span>
                      <img :src="handleImgDirection(item.MOM)" :class="{'special-margin':index === 3}" alt="">
                      <span>{{ Math.abs(item.MOM) }}%</span>
                    </div>
                    <div>
                      <span>周同比</span>
                      <img :src="handleImgDirection(item.WOW)" :class="{'special-margin':index === 3}" alt="">
                      <span>{{ Math.abs(item.WOW) }}%</span>
                    </div>
                  </div>
                  <div class="ability-num-direction-row">
                    <div>
                      <span>月新增</span>
                      <img :src="handleImgDirection(item.monthNew)" :class="{'special-margin':index === 3}" alt="">
                      <span>{{ Math.abs(item.monthNew) }}</span>
                    </div>
                    <div style="width: 1.17rem">
                      <span>周新增</span>
                      <img :src="handleImgDirection(item.weekNew)" :class="{'special-margin':index === 3}" alt="">
                      <span>{{ Math.abs(item.weekNew) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>

        </div>


        <div class='chart-line-wrap'>
          <el-row :gutter='12'>
            <el-col :span='8'>
              <div class="chart-left">
                <div class="chart-top-area">
                  <div class="chart-title">能力上台及调用情况</div>
                  <div class="chart-sub-title">
                  </div>
                </div>
                <div class="chart-content" ref="chart1">
                </div>
              </div>
            </el-col>
            <el-col :span='16'>
              <div class="chart-right">
                <div class="chart-right-one">
                  <div class="chart-top-area">
                    <div class="chart-title">能力上台情况</div>
                    <div class="chart-sub-title">
                      <div class='chart-sub-title-icon'></div>
                      省公司上台情况
                    </div>
                  </div>
                  <div class="chart-content" ref="chart2">
                  </div>
                </div>
                <div class="chart-right-two">
                  <div class="chart-top-area">
                    <div class="chart-title"></div>
                    <div class="chart-sub-title">
                      <div class='chart-sub-title-icon'></div>
                      集团、专业机构上台情况
                    </div>
                  </div>
                  <div class="chart-content" ref="chart3">
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class='chart-line-wrap'>
          <el-row :gutter='12'>
            <el-col :span='8'>
              <div class="chart-left">
                <div class="chart-top-area">
                  <div class="chart-title">平台能力使用及优秀应用情况</div>
                  <div class="chart-sub-title">
                  </div>
                </div>
                <div class="chart-content">
                  <table class="award-table">
                    <thead>
                    <tr>
                      <th>所属奖项</th>
                      <th>应用名称</th>
                      <th>所属单位</th>
                      <th>单位类型</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in awardList">
                      <td>{{ item.award }}</td>
                      <td>{{ item.name }}</td>
                      <td>{{ item.company }}</td>
                      <td>{{ item.companyType }}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </el-col>
            <el-col :span='16'>
              <div class="chart-right">
                <div class="chart-right-one">
                  <div class="chart-top-area">
                    <div class="chart-title">能力使用情况</div>
                    <div class="chart-sub-title">
                      <div class='chart-sub-title-icon'></div>
                      省公司能力使用情况
                    </div>
                  </div>
                  <div class="chart-content" ref="chart4">
                  </div>
                </div>
                <div class="chart-right-two">
                  <div class="chart-top-area">
                    <div class="chart-title"></div>
                    <div class="chart-sub-title">
                      <div class='chart-sub-title-icon'></div>
                      集专直能力使用情况
                    </div>
                  </div>
                  <div class="chart-content" ref="chart5">
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>


        <!--        <div class="chart-wrap-one">-->
        <!--          <div class="chart-left">-->
        <!--            <div class="chart-top-area">-->
        <!--              <div class="chart-title">能力上台及调用情况</div>-->
        <!--              <div class="chart-sub-title">-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="chart-content" ref="chart1">-->
        <!--            </div>-->
        <!--          </div>-->

        <!--          <div class="chart-right">-->
        <!--            <div class="chart-right-one">-->
        <!--              <div class="chart-top-area">-->
        <!--                <div class="chart-title">能力上台情况</div>-->
        <!--                <div class="chart-sub-title">-->
        <!--                  省公司上台情况-->
        <!--                </div>-->
        <!--              </div>-->
        <!--              <div class="chart-content" ref="chart2">-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="chart-right-two">-->
        <!--              <div class="chart-top-area">-->
        <!--                <div class="chart-title"></div>-->
        <!--                <div class="chart-sub-title">-->
        <!--                  集团、专业机构上台情况-->
        <!--                </div>-->
        <!--              </div>-->
        <!--              <div class="chart-content" ref="chart3">-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->

        <!--        <div class="chart-wrap-one">-->
        <!--          <div class="chart-left">-->
        <!--            <div class="chart-top-area">-->
        <!--              <div class="chart-title">平台能力使用及优秀应用情况</div>-->
        <!--              <div class="chart-sub-title">-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="chart-content">-->
        <!--              <table class="award-table">-->
        <!--                <thead>-->
        <!--                <tr>-->
        <!--                  <th>所属奖项</th>-->
        <!--                  <th>应用名称</th>-->
        <!--                  <th>所属单位</th>-->
        <!--                  <th>单位类型</th>-->
        <!--                </tr>-->
        <!--                </thead>-->
        <!--                <tbody>-->
        <!--                <tr v-for="item in awardList">-->
        <!--                  <td>{{ item.award }}</td>-->
        <!--                  <td>{{ item.name }}</td>-->
        <!--                  <td>{{ item.company }}</td>-->
        <!--                  <td>{{ item.companyType }}</td>-->
        <!--                </tr>-->
        <!--                </tbody>-->
        <!--              </table>-->
        <!--            </div>-->
        <!--          </div>-->

        <!--          <div class="chart-right">-->
        <!--            <div class="chart-right-one">-->
        <!--              <div class="chart-top-area">-->
        <!--                <div class="chart-title">能力使用情况</div>-->
        <!--                <div class="chart-sub-title">-->
        <!--                  省公司能力使用情况-->
        <!--                </div>-->
        <!--              </div>-->
        <!--              <div class="chart-content" ref="chart4">-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="chart-right-two">-->
        <!--              <div class="chart-top-area">-->
        <!--                <div class="chart-title"></div>-->
        <!--                <div class="chart-sub-title">-->
        <!--                  集专直能力使用情况-->
        <!--                </div>-->
        <!--              </div>-->
        <!--              <div class="chart-content" ref="chart5">-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->

        <div class="rank-wrap">
          <el-row :gutter='12'>
            <el-col :span='8' v-for="(item,index) in abilityRankList" :key="index">
              <div class="ability-rank-cards">
                <div class="ability-rank-title-row">
                  <div class="ability-rank-title-icon">
                    <img :src="item.icon" alt="">
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="ability-rank-unit">（单位：{{ item.unit }}）</div>
                </div>
                <div class="ability-rank-content-row">
                  <ul>
                    <li :class="{'first':index===0,'second':index===1,'third':index===2}"
                        v-for="(subItem,index) in item.data" :key="index">
                      <div class="ability-rank-info">
                        <span class="rank-text">{{ index + 1 }}</span>
                        <span class="rank-type">{{ subItem.abilityName }}</span>
                      </div>
                      <div class="ability-rank-value">{{ formatNumber(subItem.value) }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </el-col>
            <el-col :span='8'>
              <div class="ability-rank-cards">
                <div class="ability-rank-title-row">
                  <div class="ability-rank-title-icon">
                    <img src="../../assets/image/home/icon7.png" alt="">
                    <span>能力上架单位占比</span>
                  </div>
                  <div class="ability-rank-unit"></div>
                </div>
                <div class="ability-rank-content-row" ref="chart6">

                </div>
              </div>
            </el-col>
            <el-col :span='8'>
              <div class="ability-rank-cards">
                <div class="ability-rank-title-row">
                  <div class="ability-rank-title-icon">
                    <img src="../../assets/image/home/icon7.png" alt="">
                    <span>能力交付方式占比</span>
                  </div>
                  <div class="ability-rank-unit"></div>
                </div>
                <div class="ability-rank-content-row" ref="chart7">
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>


      <!--        <div class="main-content-left">-->
      <!--          <div class="ability-num-wrap">-->
      <!--            <div class="ability-num-cards" v-for="(item,index) in abilityNumData" :key="index">-->
      <!--              <div class="ability-name-diagram">-->
      <!--                <div class="ability-name-num">-->
      <!--                  <div class="ability-type">{{ item.name }}</div>-->
      <!--                  <div class="ability-num">{{ formatNumber(item.value) }}</div>-->
      <!--                </div>-->
      <!--                <div class="ability-diagram">-->
      <!--                  <img :src="item.diagram" alt="">-->
      <!--                </div>-->
      <!--              </div>-->
      <!--              <div class="ability-num-directions">-->
      <!--                <div class="ability-num-direction-row">-->
      <!--                  <div>-->
      <!--                    <span>月同比</span>-->
      <!--                    <img :src="handleImgDirection(item.MOM)" :class="{'special-margin':index === 3}" alt="">-->
      <!--                    <span>{{ item.MOM }}%</span>-->
      <!--                  </div>-->
      <!--                  <div>-->
      <!--                    <span>周同比</span>-->
      <!--                    <img :src="handleImgDirection(item.WOW)" :class="{'special-margin':index === 3}" alt="">-->
      <!--                    <span>{{ item.WOW }}%</span>-->
      <!--                  </div>-->
      <!--                </div>-->
      <!--                <div class="ability-num-direction-row">-->
      <!--                  <div>-->
      <!--                    <span>月新增</span>-->
      <!--                    <img :src="handleImgDirection(item.monthNew)" :class="{'special-margin':index === 3}" alt="">-->
      <!--                    <span>{{ item.monthNew }}</span>-->
      <!--                  </div>-->
      <!--                  <div style="width: 117px">-->
      <!--                    <span>周新增</span>-->
      <!--                    <img :src="handleImgDirection(item.weekNew)" :class="{'special-margin':index === 3}" alt="">-->
      <!--                    <span>{{ item.weekNew }}</span>-->
      <!--                  </div>-->
      <!--                </div>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--          <div class="ability-rank-wrap">-->
      <!--            <div class="ability-rank-cards" v-for="(item,index) in abilityRankList" :key="index">-->
      <!--              <div class="ability-rank-title-row">-->
      <!--                <div class="ability-rank-title-icon">-->
      <!--                  <img :src="item.icon" alt="">-->
      <!--                  <span>{{ item.name }}</span>-->
      <!--                </div>-->
      <!--                <div class="ability-rank-unit">（单位：{{ item.unit }}）</div>-->
      <!--              </div>-->
      <!--              <div class="ability-rank-content-row">-->
      <!--                <ul>-->
      <!--                  <li :class="{'first':index===0,'second':index===1,'third':index===2}"-->
      <!--                      v-for="(subItem,index) in item.data" :key="index">-->
      <!--                    <div class="ability-rank-info">-->
      <!--                      <span class="rank-text">{{ index + 1 }}</span>-->
      <!--                      <span class="rank-type">{{ subItem.abilityName }}</span>-->
      <!--                    </div>-->
      <!--                    <div class="ability-rank-value">{{ formatNumber(subItem.value) }}</div>-->
      <!--                  </li>-->
      <!--                </ul>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--  -->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="main-content-right">-->
      <!--          <div class="ability-circle-diagram">-->
      <!--            <div class="ability-diagram-names">能力上架单位占比</div>-->
      <!--            <div class="ability-diagram-container">-->
      <!--              <Pie :data="pieData" />-->
      <!--            </div>-->
      <!--          </div>-->
      <!--          <div class="ability-circle-diagram">-->
      <!--            <div class="ability-diagram-names">能力交付方式占比</div>-->
      <!--            <div class="ability-diagram-container short-pie">-->
      <!--              <Pie :data="pieData2" />-->
      <!--            </div>-->
      <!--          </div>-->
      <!--          <div class="ability-circle-diagram">-->
      <!--            <div class="ability-diagram-names">API调用实时排行</div>-->
      <!--            <div class="ability-side-ranks">-->
      <!--              <ul>-->
      <!--                <li v-for="(item,index) in apiUseRankList"-->
      <!--                    :class="{'first':index===0,'second':index===1,'third':index===2}">-->
      <!--                  <div class="ability-rank-info">-->
      <!--                    <span class="rank-text">{{ index + 1 }}</span>-->
      <!--                    <span class="rank-type">{{ item }}</span>-->
      <!--                  </div>-->
      <!--                </li>-->
      <!--              </ul>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
    </div>
    <!--    </v-scale-screen>-->
  </Layout>
</template>

<style lang="scss" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.v-screen-box {
  background: transparent !important;
}

.content {
  margin: 0px auto;
  width: 100%;
  //min-height: 100vh;
  background: linear-gradient(360deg, #F3F5FE 0%, #D1D8FA 100%);

  .title-area {
    height: 53px;
    background-image: url("../../assets/image/home/title-bg.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: center;
    padding-top: 5px;
  }

  .main-content {
    width: 95%;
    //height: 300px;
    margin: 0 auto;
    padding-top: .33rem;

    .data-overview-wrap {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.16rem;

      .data-overview-cube {
        width: 2.9rem;
        height: 1.45rem;
        padding-top: 0.26rem;
        padding-left: 0.19rem;
        display: flex;
        justify-content: space-between;
        padding-right: 0.25rem;
        border-radius: 10px;
        //align-items: center;
        background: url("../../assets/image/home/data-view-cube.png") no-repeat center/100%;

        &.padding-r0 {
          padding-right: 0;
        }

        .data-overview-icon {
          align-items: center;
          display: flex;
          margin-top: -0.26rem;

          img {
            width: 0.6rem;
            height: 0.6rem;
          }
        }

        .data-overview-detail {
          div:first-child {
            span:first-child {
              font-size: 0.48rem;
              font-family: D-DIN Exp-DINExp, D-DIN Exp-DINExp;
              font-weight: bold;
              color: #000000;
            }

            span:last-child {
              font-size: .24rem;
              color: #747882;
              margin-left: .1rem;
            }
          }

          div:last-child {
            font-size: .24rem;
            color: #747882;
            margin-top: .02rem;
            font-weight: 500;
          }
        }
      }
    }

    .data-key-card-wrap {
      display: flex;
      justify-content: space-between;
      margin-bottom: .2rem;

      .ability-num-cards {

        width: 4.43rem;
        //height: 2.01rem;
        background: url("../../assets/image/home/data-key.png");
        padding: 0.24rem 0.26rem 0.08rem 0.25rem;
        border-radius: 0.1rem;

        .ability-name-diagram {
          border-bottom: 1px solid rgba(0, 0, 0, .05);
          padding-bottom: 0.15rem;
          display: flex;
          justify-content: space-between;

          .ability-name-num {

            .ability-type {
              font-size: 0.14rem;
              font-family: MiSans, MiSans;
              font-weight: 400;
              color: #000000;
            }

            .ability-num {
              font-size: 0.4rem;
              font-family: D-DIN Exp-DINExp, D-DIN Exp-DINExp;
              font-weight: bold;
              color: #000000;
              margin-top: 0.07rem;
            }
          }

          .ability-diagram {
            flex: 1;

            img {
              //width: 167px;
              width: 100%;
              height: 66px;
            }
          }
        }

        .ability-num-directions {
          padding-left: 0.12rem;
          padding-right: 0.12rem;
          padding-top: 0.17rem;

          .ability-num-direction-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.14rem;

            div {
              display: inline-block;
              justify-content: space-between;
              width: 1.17rem;

              span {
                font-size: 0.14rem;
                font-family: MiSans, MiSans;
                font-weight: 400;
                color: #000000;
                vertical-align: middle;
              }

              img {
                width: 0.14rem;
                height: 0.14rem;
                margin-left: 0.19rem;
                margin-right: 0.06rem;
                vertical-align: middle;

                &.special-margin {
                  margin-left: 0.06rem;
                  margin-right: 0.02rem;
                }
              }
            }
          }
        }
      }

    }

    .chart-line-wrap {
      margin-bottom: .2rem;

      .chart-content {
        //height: 100%;
        width: 100%;
        height: 343px;

        .award-table {
          width: 100%;
          margin-top: .17rem;
          border-collapse: collapse;

          thead {
            tr {
              background: #8196FF;
              height: .36rem;

              th {
                color: #000;
                text-align: center;
                font-size: .14rem;
              }
            }
          }

          tbody {
            tr {
              td {
                height: .32rem;
                color: #000;
                font-size: 0.14rem;
                text-align: center;
              }
            }

            tr:nth-child(even) {
              background-color: #B8C4FF;
            }
          }
        }
      }

      .chart-left {
        width: 5.96rem;
        height: 100%;
        border-radius: .1rem;
        padding: .14rem .23rem .19rem .27rem;
        background: url("../../assets/image/home/chart-left.png") no-repeat center;
        background-size: 100% 100%;
      }

      .chart-right {
        width: 12.05rem;
        height: 100%;
        border-radius: .1rem;
        padding: .14rem .23rem .19rem .27rem;
        background: url("../../assets/image/home/chart-right.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;

        .chart-right-one {
          width: 6rem;
          height: 100%;
        }

        .chart-right-two {
          width: 6rem;
          height: 100%;
          .chart-title{
            visibility: hidden;
          }
        }
      }


      .chart-top-area {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .chart-title {
          color: #0066FF;
          font-size: .24rem;
          //letter-spacing: -2px;
          height: .32rem;
          font-weight: 600;
          padding-left: .1rem;
          background-image: url("../../assets/image/home/chart-title-bg.png");
          background-repeat: no-repeat;
          background-size: contain;
          background-position-x: left;
          background-position-y: top;
          padding-bottom: .04rem;
          flex: 1;
        }

        .chart-sub-title {
          font-size: 14px;
          display: flex;
          align-items: center;

          &-icon {
            width: 16px;
            height: 16px;
            background: url("../../assets/image/home/chart-top-circle.png");
            background-size: 100% 100%;
          }
        }
      }
    }

    .chart-wrap-one {
      height: 3.76rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: .17rem;

      .chart-content {
        height: 100%;
        width: 100%;

        .award-table {
          width: 100%;
          margin-top: .17rem;
          border-collapse: collapse;

          thead {
            tr {
              background: #8196FF;
              height: .36rem;

              th {
                color: #fff;
                text-align: center;
                font-size: .14rem;
              }
            }
          }

          tbody {
            tr {
              td {
                height: .32rem;
                color: #000;
                font-size: 0.14rem;
                text-align: center;
              }
            }

            tr:nth-child(even) {
              background-color: #B8C4FF;
            }
          }
        }
      }

      .chart-left {
        width: 5.96rem;
        height: 100%;
        border-radius: .1rem;
        padding: .14rem .23rem .19rem .27rem;
        background: url("../../assets/image/home/chart-left.png") no-repeat center/100%;
      }

      .chart-right {
        width: 12.05rem;
        height: 100%;
        border-radius: .1rem;
        padding: .14rem .23rem .19rem .27rem;
        background: url("../../assets/image/home/chart-right.png") no-repeat center/100%;
        display: flex;
        justify-content: space-between;

        .chart-right-one {
          width: 6rem;
          height: 100%;
        }

        .chart-right-two {
          width: 6rem;
          height: 100%;
        }
      }


      .chart-top-area {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .chart-title {
          color: #0066FF;
          font-size: .24rem;
          //letter-spacing: -2px;
          font-weight: 600;
          padding-left: .1rem;
          background-image: url("../../assets/image/home/chart-title-bg.png");
          background-repeat: no-repeat;
          background-size: contain;
          background-position-x: left;
          background-position-y: top;
          padding-bottom: .04rem;
          flex: 1;
        }

        .chart-sub-title {
          padding-left: .2rem;
          font-size: 14px;
          background: url("../../assets/image/home/chart-top-circle.png") no-repeat left;
        }
      }


    }

    .rank-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-bottom: 0.76rem;

      .ability-rank-cards {
        width: 5.95rem;
        //height: 3.61rem;
        background: url("../../assets/image/home/rank-bg.png");
        background-size: 100% 100%;
        border-radius: .1rem;
        padding: .23rem .26rem 0 .25rem;
        margin-bottom: .2rem;

        &:nth-child(n+3) {
          margin-bottom: 0;
        }

        .ability-rank-title-row {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .ability-rank-title-icon {
            img {
              width: .2rem;
              height: .2rem;
              vertical-align: middle;
            }

            span {
              margin-left: .1rem;
              font-size: .16rem;
              font-family: MiSans, MiSans;
              font-weight: 600;
              color: #000000;
            }
          }

          .ability-rank-unit {
            font-size: .14rem;
            font-family: MiSans, MiSans;
            font-weight: 400;
            color: #000000;
          }
        }

        .ability-rank-content-row {
          padding-top: .18rem;
          padding-left: .18rem;
          height: 3.43rem;

          ul {
            li {
              margin-bottom: .06rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-right: .25rem;

              &.first {
                .rank-text {
                  background: #FFE2CC;
                  border-radius: .05rem;
                  color: #FF6F00;
                }
              }

              &.second {
                .rank-text {
                  background: #FFEAD3;
                  border-radius: .05rem;
                  color: #FF9541;
                }
              }

              &.third {
                .rank-text {
                  background: #FFF2D0;
                  border-radius: .05rem;
                  color: #FFBC3C;
                }
              }

              &.first, &.second, &.third {
                .rank-type, .ability-rank-value {
                  color: #FF2424 !important;
                }
              }

              .ability-rank-info {
                .rank-text {
                  font-size: .14rem;
                  font-family: MiSans, MiSans;
                  font-weight: 400;
                  color: #707070;
                  display: inline-block;
                  width: .24rem;
                  height: .24rem;
                  text-align: center;
                  line-height: .24rem;
                }

                .rank-type {
                  font-size: .14rem;
                  font-family: MiSans, MiSans;
                  font-weight: 400;
                  color: #000000;
                  margin-left: .1rem;
                }
              }
            }
          }
        }
      }
    }
  }


  .main-content-left {
    width: 1370px;
    margin-right: 10px;
    //margin-bottom: 10px;

    .ability-num-wrap {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .ability-num-cards {
        width: 335px;
        height: 201px;
        background: #fff;
        padding: 20px 15px 8px 15px;
        border-radius: 5px 5px 5px 5px;

        .ability-name-diagram {
          border-bottom: 1px solid rgba(0, 0, 0, .05);
          padding-bottom: 15px;
          display: flex;
          justify-content: space-between;

          .ability-name-num {
            .ability-type {
              font-size: 14px;
              font-family: MiSans, MiSans;
              font-weight: 400;
              color: #000000;
            }

            .ability-num {
              font-size: 40px;
              font-family: D-DIN Exp-DINExp, D-DIN Exp-DINExp;
              font-weight: bold;
              color: #000000;
              margin-top: 7px;
            }
          }

          .ability-diagram {

          }
        }

        .ability-num-directions {
          padding-left: 12px;
          padding-right: 12px;
          padding-top: 17px;

          .ability-num-direction-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 14px;

            div {
              display: inline-block;
              justify-content: space-between;
              width: 117px;

              span {
                font-size: 14px;
                font-family: MiSans, MiSans;
                font-weight: 400;
                color: #000000;
                vertical-align: middle;
              }

              img {
                width: 14px;
                height: 14px;
                margin-left: 19px;
                margin-right: 6px;
                vertical-align: middle;

                &.special-margin {
                  margin-left: 6px;
                  margin-right: 2px;
                }
              }
            }
          }
        }
      }
    }

    .ability-rank-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .ability-rank-cards {
        width: 450px;
        height: 361px;
        border-radius: 5px 5px 5px 5px;
        padding: 12px 20px 15px 20px;
        margin-bottom: 10px;
        background: url("../../assets/image/home/rank-bg.png") no-repeat center;

        &:nth-child(n+3) {
          margin-bottom: 0;
        }

        .ability-rank-title-row {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .ability-rank-title-icon {
            img {
              width: 20px;
              height: 20px;
              vertical-align: middle;
            }

            span {
              margin-left: 10px;
              font-size: 16px;
              font-family: MiSans, MiSans;
              font-weight: 600;
              color: #000000;
            }
          }

          .ability-rank-unit {
            font-size: 14px;
            font-family: MiSans, MiSans;
            font-weight: 400;
            color: #000000;
          }
        }

        .ability-rank-content-row {
          padding-top: 18px;
          padding-left: 18px;

          ul {
            li {
              margin-bottom: 6px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-right: 25px;

              &.first {
                .rank-text {
                  background: #FFE2CC;
                  border-radius: 5px 5px 5px 5px;
                  color: #FF6F00;
                }
              }

              &.second {
                .rank-text {
                  background: #FFEAD3;
                  border-radius: 5px 5px 5px 5px;
                  color: #FF9541;
                }
              }

              &.third {
                .rank-text {
                  background: #FFF2D0;
                  border-radius: 5px 5px 5px 5px;
                  color: #FFBC3C;
                }
              }

              &.first, &.second, &.third {
                .rank-type, .ability-rank-value {
                  color: #FF2424 !important;
                }
              }

              .ability-rank-info {
                .rank-text {
                  font-size: 14px;
                  font-family: MiSans, MiSans;
                  font-weight: 400;
                  color: #707070;
                  display: inline-block;
                  width: 24px;
                  height: 24px;
                  text-align: center;
                  line-height: 24px;
                }

                .rank-type {
                  font-size: 14px;
                  font-family: MiSans, MiSans;
                  font-weight: 400;
                  color: #000000;
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
    }

  }

  .main-content-right {
    width: 220px;
    padding: 15px 12px 0 7px;
    background: #fff;

    .ability-circle-diagram {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .ability-diagram-names {
        font-size: 16px;
        font-family: MiSans, MiSans;
        font-weight: 600;
        color: #000000;
      }

      .ability-diagram-container {
        height: 300px;
      }

      .short-pie {
        height: 220px;
      }

      .ability-side-ranks {
        margin-top: 10px;

        ul {
          li {
            margin-bottom: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &.first {
              .rank-text {
                background: #FFE2CC;
                color: #FF6F00;
              }
            }

            &.second {
              .rank-text {
                background: #FFEAD3;
                color: #FF9541;
              }
            }

            &.third {
              .rank-text {
                background: #FFF2D0;
                color: #FFBC3C;
              }
            }

            .ability-rank-info {
              .rank-text {
                font-size: 14px;
                font-family: MiSans, MiSans;
                font-weight: 400;
                color: #707070;
                display: inline-block;
                width: 24px;
                height: 24px;
                text-align: center;
                line-height: 24px;
                border-radius: 5px 5px 5px 5px;
              }

              .rank-type {
                font-size: 14px;
                font-family: MiSans, MiSans;
                font-weight: 400;
                color: #000000;
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
